<template>
	<div>
		<div class="graybg"></div>
		<!--头部-->
		<header id="header">
			<div class="header header_bg clearfix">
				<div class="header_left pull-left">
					<i class="iconfont baiColor" onclick="javascript:history.back(-1)">&#xe612;</i>
				</div>
				<div class="header_center baiColor">发起群聊</div>
				<div class="header_right">
					<em class="baiColor" @click="enter">确定</em>
				</div>
			</div>
		</header>
		<!--input-->
		<div class="input _width header_bg">
			<!-- <router-link to="/wfriendsSearch"> -->
			<div class="input-main marginAuto clearfix">
				<span class="iconfont pull-left">&#xe680;</span>
				<input type="text" v-model="names" placeholder="输入你想要建群的名字"/>
			</div>
			<!-- </router-link> -->
		</div>
		<!--=主内容=-->
		<div class="main marginAuto">
			<div class="mian-each marginAuto clearfix" v-for="(list, index) in lists">
				<div class="mian-each-img pull-left">
					<img :src="list.u_img"/>
				</div>
				<div class="name ellipsis01 pull-left">
					<span v-text="list.u_name"></span>
				</div>
				<div class="select pull-right" :class="{activeBcolor:list.checked}" @click="select(list,index,list.u_id)">
					<i class="iconfont" :class="{activeCcolor:list.checked}">&#xe626;</i>
					<input type="checkbox" :value="index" />
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default{
		data(){
			return{
				lists:[],
				ids:[],
				names:'',
			}
		},
		mounted(){
			var params = new URLSearchParams();
			var info = window.localStorage.data;
			params.append("token", info); //客户秘钥（信息）
			this.$axios({
				url: "/One/Social/sponsorGroup",
				method: "GET",
				params:{
					token:info
				}
			}).then(res => {
				if(res.data.status == 1){
					this.lists = res.data.data;
				}
			}).catch(function(err) {
				console.log(err);
			});
		},
		methods:{
//			选择
			select(list,index,id){
				this.ids.push(id);
				if(typeof list.checked == "undefined"){
					this.$set(list,'checked',true);
					this.$set(list,'id',index);
				}else{
					list.checked = !list.checked
				};
			},
//			确定
			enter(){
				// var arr=[];
				// for(var i=0, len; len=this.lists[i]; i++){
				// 	if(this.lists[i].checked == true){
				// 		arr.push(this.lists[i].id);
				// 	}
				// };
				// console.log(arr);	//发起群聊的id

				var info = window.localStorage.data;
				var params = new URLSearchParams();
				params.append('token', info);	//客户秘钥（信息）
				params.append('with',this.ids);

				if(this.names != ''){
					params.append('name',this.names)
				}else{
					alert('请输入你要建的群名')
				}

				this.$axios({
				    url:"/One/Social/sponsorGroup",
					method:"POST",
					data:params
				}).then((res) =>{
					if(res.data.status == 1){
						// alert('发起群聊成功')
						this.$router.push('/wmyfriend');
					}else if(res.data.status == 0){
						alert('发起群聊失败')
					}
				}).catch(function(err){
					console.log(err)
				})

			}
		}
	}
</script>

<style scoped>
	@import "../css/public.css";
	@import "../css/wgroupChat.css";
	.activeBcolor{
		border-color:#F3961F;
	}
	.activeCcolor{
		color:#F3961F !important;
	}

</style>
